大家好，我是來自巴哈姆特的 %%鼠：

歡迎加入這趟 30 天鐵人旅程！主題是「渲染與 GPU 編程」。目標很簡單也很野心——把「看得懂」變成「做得出來」：你不只會懂 GPU 為何快、渲染管線怎麼跑、Shader 如何寫，還會實作到 Vulkan、WebGPU 與 CUDA，從畫出第一個三角形一路到能解釋 PBR 與基本光追差異。

以下導讀內容若有看不懂得單字先別緊張，後續文章會待著各位設定。

你會獲得什麼？

• 系統化知識地圖：CPU vs GPU、渲染管線、材質與光照、記憶體與資料流。

• 三條實作主線

  1. Vulkan（原生、掌控細節）
  2. WebGPU（跨平台、瀏覽器即可）
  3. CUDA（通用 GPU 計算與最佳化）

• 可運行的小專案：三角形 → 模型載入 → 基本光照/材質 → Instancing；CUDA 的 thread/block/grid 觀念與小型運算範例。

• 性能與除錯思維：你會知道瓶頸在哪、該看哪個計數器、怎麼調整資料布局。

適合誰？

• 會一點 C/C++ 或 C#/Unity、JavaScript/TypeScript 任一即可（剛好對應 Vulkan／Unity／WebGPU）。
• 線代基礎（向量、矩陣、點乘/叉乘）& 圖學直覺（光照、法線）加分，但不要求學院派背景。
• 想從「用引擎」提升到「懂底層」、或從「會跑模型」躍升「會寫 shader／改管線」。

環境建議（不鎖版本）

• Windows / Linux / macOS 任一平台。
• 顯卡驅動：維持官方建議的最新穩定版。
• Vulkan：安裝 Vulkan SDK（含 glslc）。
• WebGPU：使用支援 WebGPU 的瀏覽器（如 Chromium 家族的新版）；Node.js 便於工具鏈。
• CUDA：NVIDIA GPU + CUDA Toolkit（若無 NVIDIA，也能讀概念並在雲端或日後實測）。
• Unity（LTS 版）作為 Shader 入門的友善場域。

我避免綁特定版本，文章會說明差異點與常見踩雷，讓你在自己的環境也能通。

30 天地圖（週週有里程碑）

Week 1｜基礎打底（D1–D7）

1. 動畫電影的一切！GPU 與 CPU 的差異：為什麼渲染離不開 GPU？
2. 渲染管線簡介：從頂點到像素的旅程
3. Shader 是什麼？GPU 編程的靈魂
4. GPU 記憶體架構與資料流：如何有效管理資源
5. PBR（Physically Based Rendering）原理與實作
6. Shader 入門：Unity Shader 簡介（訂正清單拼字）
7. 光照模型比較：Phong vs Blinn-Phong vs Cook-Torrance

Week 2｜材質與效率（D8–D14）
8. Normal Map 與 Bump Map：讓平面有細節
9. 數大便是美：GPU Instancing 實作
10. Vulkan 是什麼？與 OpenGL 的差異與優勢
11. Vulkan 專案骨架與初始化
12. Vulkan 渲染流程：Command Buffer 與 Render Pass
13. Vulkan 建立 Shader Module 並繪製三角形
14. Vulkan 載入模型並加入光影

Week 3｜現代管線與 Web（D15–D21）
15. 深入 Descriptor Set 與 Pipeline Layout
16. WebGPU 是什麼？與 WebGL 的差異與優勢
17. 第一個 WebGPU 專案：環境與初始化
18. WebGPU 渲染管線解析
19. WGSL 編寫 Vertex / Fragment Shader
20. 在 WebGPU 中載入並繪製模型
21. 實作基本光照與材質

Week 4｜GPU 通用計算與新技術（D22–D30）
22. CUDA 是什麼？GPU 平行運算基礎
23. 第一個 CUDA 專案：環境與 Hello World
24. CUDA Thread/Block/Grid 架構解析
25. [待定或預留時間] CUDA 實作
26. [待定或預留時間] CUDA 的效能分析與最佳化策略?
27. [待定或預留時間] GPU 新技術介紹
28. [待定或預留時間] GPU 新技術介紹
29. [待定或預留時間] GPU 新技術介紹
30. [待定或預留時間] 光柵化 vs 光線追蹤：兩種渲染方式的比較與取捨

待定主題我會依讀者回饋與篇幅，在該週調整最有價值的內容（會盡量挑「能落地、能測到效果」的技術）。

這 30 天，我們會「做」的幾件事

• 畫面路線：三角形 → 模型（.obj/.gltf 任一）→ 基本光照 → PBR 近似 → Instancing 場景。
• 管線路線：理解 Descriptor / Pipeline Layout 。
• WebGPU 路線：WGSL 語法 → Buffer / BindGroup → 在瀏覽器中完成光照與模型渲染。
• CUDA 路線：thread/block/grid → 一個可量測的最佳化案例。

小小術語表（先有概念最重要）

• Shader：在 GPU 上執行的小程式，常見類型：Vertex/Fragment（或 Pixel）、Compute 等。
• Descriptor/BindGroup：描述 GPU 可存取資源（Buffer、Texture…）的「綁定表」。
• Pipeline：固定＋可程式階段的配置集合。
• Instancing：同一幾何多次繪製，僅以少量差異資料（變換、顏色）做大規模渲染。

預期常見問題（先打預防針）

• 為什麼我的 FPS 掉很多？ 可能是 CPU/GPU 同步、Descriptor 更新策略、或記憶體拷貝過頻。
• 同一段 Shader，在 Vulkan / WebGPU 結果不一樣？ 驅動/精度/預設坐標系差異，會教你如何檢查。
• CUDA 核心看似沒跑？ grid/block 設定或邊界條件錯誤、或 launch 失敗未檢錯。
• 我沒有 NVIDIA 顯卡怎麼辦？ CUDA 章節先理解模型，可在雲端或日後硬體再實作；Vulkan/WebGPU 仍可持續。

如何跟著學？

• 每天 30–60 分鐘：讀概念 + 跑 MVP。
• 每週一個里程碑：第 1 週能講清楚渲染管線，第 2 週畫出有光的 3D 模型，第 3 週在瀏覽器跑起來，第 4 週寫出能量測的 CUDA kernel。
• 把範例「改壞再修」：真正學會的是「定位問題與還原現場」的能力。

最後的鼓勵

圖形與 GPU 的世界很酷，但也很誠實：你動手、它就回饋。接下來 30 天，我會把每個主題拆成能落地的最小單位，讓你每天都有「畫面／數字」可以驗收。
準備好了就從 Day 1：GPU 與 CPU 的差異 開始——我們先建立對「平行」與「資料局部性」的直覺，之後的 Vulkan／WebGPU／CUDA 都會因此好走很多。

開啟你的 GPU 之旅吧 🚀